import { ref } from 'vue'
import { useTheme } from 'vuetify'
import { defineStore } from 'pinia'

export const useThemeStore = defineStore('theme', () => {
  const theme = useTheme()
  const themeText = ref('暗色')

  /** 切換亮色＆暗色模式
   * @see {@link @/plugins/vuetify/index.js} 須對應主題標籤
   */
  function toggleTheme() {
    theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
    themeText.value = theme.global.current.value.dark ? '亮色' : '暗色'
  }

  return { theme, toggleTheme, themeText }
})
